<template>
  <div>
    <div class="app-container">
      <SearchArea
        @addEnterprise="addEnterprise"
        @checkout2="checkout2"
        style="margin-bottom: 10px"
      />
      <AditPermission ref="aditPermission" @addCompetence="addCompetence" />
      <AditPermission2 ref="aditPermission2" @sendEdit="sendEdit" />
      <el-table
        v-loading="listLoading"
        :data="i_list"
        element-loading-text="Loading"
        fit
        highlight-current-row
        :header-row-class-name="tableRowClassName"
      >
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="账号" align="center">
          <template slot-scope="scope">{{ scope.row.roleCode }}</template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          class-name="status-col"
          label="状态"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              scope.row.status == 0 ? "启用" : "冻结"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="创建时间"
          width="200"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{ scope.row.createTime | dataFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == '1'">
              <EButton
                :title="'编辑'"
                :color="'success'"
                @edit="edit(scope.row.roleCode, scope.row.roleName)"
              ></EButton>
              <EButton
                :title="'启用'"
                :color="'primary'"
                @freeze="freeze(scope.$index, scope.row.id, scope.row.status)"
              ></EButton>
            </div>
            <div v-else>
              <EButton
                :title="'编辑'"
                :color="'success'"
                @edit="edit(scope.row.roleCode, scope.row.roleName)"
              ></EButton>
              <EButton
                :title="'冻结'"
                :color="'info'"
                @freeze="freeze(scope.$index, scope.row.id, scope.row.status)"
              ></EButton>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        layout="prev, pager, next"
        :total="total"
        @current-change="changeIndex"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import SearchArea from "../../components/SearchArea2/index";
import EButton from "../../components/ButtonBox/index";
import AditPermission from "../../components/Dialog/AditPermission";
import AditPermission2 from "../../components/Dialog/AditPermission2";
import {
  getListPage,
  switchStatus,
  pagination,
  sendCompetence,
  editCompetence,
  editSend,
} from "../../utils/authority";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        "0": "success",
        "1": "info",
      };
      return statusMap[status];
    },
    dataFormat() {
      let dt = new Date();
      let y = dt.getFullYear();
      let m = dt.getMonth() + 1;
      let d = dt.getDate();
      let h = dt.getHours();
      let f = dt.getMinutes();
      let s = dt.getSeconds();
      return `${y}-${m}-${d}/${h}:${f}:${s}`;
    },
  },
  components: {
    SearchArea,
    EButton,
    AditPermission,
    AditPermission2,
  },
  data() {
    return {
      i_list: [],
      listLoading: false,
      index: 1,
      editPermissions: "",
      total: 10,
    };
  },
  methods: {
    async addCompetence(data) {
      let rawRes = await sendCompetence("/addRole", data);
      let res = rawRes.data.records;
      this.i_list.push(res[0]);
    },
    addEnterprise() {
      this.$refs.aditPermission.dialogVisible = true;
    },
    //点击编辑按钮把主视图的数据下发到对话框视图中,我们这里请求数据后合成数据
    async edit(roleCode, roleName) {
      this.$refs.aditPermission2.show(roleCode, roleName);
      let rawRes = await editCompetence("/edit", { roleCode });
      this.editPermissions = rawRes.data;
      let menuId = [];
      rawRes.data.map((item) => {
        menuId.push(item.menuId);
      });
      this.$refs.aditPermission2.editData(menuId);
    },
    //对话框视图点确定时触发事件到主视图
    async sendEdit(dataArr) {
      console.log(dataArr);
      let rawRes = await editSend("/editAndSave", dataArr);
      console.log(rawRes.data);
    },
    checkout2(data) {
      pagination("/listPage", "post", {
        pageNum: this.index,
        pageSize: 5,
        queryCondition: {
          roleCode: data.id,
          roleName: data.userName,
          status: data.loginLock,
        },
      })
        .then((res) => res.data)
        .then((res) => {
          this.i_list = res.records;
        });
    },
    async freeze(index, id, status) {
      status = status == 0 ? 1 : 0;
      if (status === 0) this.i_list[index].status = 1;
      if (status === 1) this.i_list[index].status = 0;
      await switchStatus(`/updateByIds`, { id, status });
      this.getListPage();

      // let state='启用'
      // if (status===1){
      //     state='冻结'
      //   };
      //   this.$confirm('确定'+state+'该用户吗？', state+'用户', {
      //     distinguishCancelAndClose: true,
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消'
      //   })
      //     .then(() => {
      //       this.$message({
      //         type: 'success',
      //         message: state+'成功~'
      //       });
      //     })
      //     .catch(action => {
      //       this.$message({
      //         type: 'info',
      //         message: action === 'cancel'
      //           ? '放弃保存并离开页面'
      //           : '停留在当前页面'
      //       })
      //     });
    },
    getListPage() {
      getListPage("/listPage")
        .then((rawRes) => rawRes.data)
        .then((res) => {
          this.i_list = res.records;
        });
      getListPage("/listPage", {})
        .then((rawRes) => {
          return  rawRes.data.pages
        })
        .then((res) => {
          this.total = res* 10;
        });
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return "warning-row";
      }
    },
    changeIndex(index) {
      this.index = index;
      let data = {
        pageNum: index,
        pageSize: 5,
      };
      pagination("/listPage", "post", data)
        .then((rawRes) => rawRes.data)
        .then((res) => {
          this.i_list = res.records;
        });
    },
  },
  created() {
    this.getListPage();
  },
};
</script>

<style scoped></style>
